@import shared.VarTool
@(missionId: Int)(implicit request: RequestHeader)
@main("结果详情")("stepMissionManage") {

	<link rel="stylesheet" media="screen" href="@routes.Assets.at("bootstrap-table-master/dist/extensions/fixed-columns/bootstrap-table-fixed-columns.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("zTree_v3/css/demo.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("zTree_v3/css/zTreeStyle/zTreeStyle.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/sampleManage.css")">
	<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/tableFilter.css")">
	<script src="@routes.Assets.at("bootstrap-table-master/dist/extensions/fixed-columns/my-bootstrap-table-fixed-columns.js")" type="text/javascript"></script>

	<style>

			.js-plotly-plot .plotly .cursor-crosshair {
				cursor: default;
			}

			.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
				border-top-right-radius: 4px;
				border-bottom-right-radius: 4px;
			}

			.modal-header {
				/*padding: 5px*/
			}

			.checkbox, .form-horizontal .checkbox {
				padding: 7px;
			}

			.table .btn {
				margin-right: 0px;
			}

			select.form-control {
				padding-left: 0px;
			}

			select:not([multiple]) {
				-webkit-appearance: none;
				-moz-appearance: none;
				background-position: right 50%;
				background-repeat: no-repeat;
				background-image: url("/assets/images/arrow.png");
				padding: 0.2em;
			}

			input.myFilter, select.myFilter {
				font-weight: 500;
			}

			input.myFilter {
				padding-left: 6px;

			}

			.myTable {
				max-height: 900px;
			}

			.modal-footer {
				padding: 10px;
			}

			#modal .form-group {
				margin-bottom: -5px !important;
			}

			.modal-header {
				padding-bottom: 0px;
			}

			div.th-inner {
				width: 100%;
				white-space: nowrap;
				display: inline-block;
			}

			div.fht-cell {
				/*min-width: 100px;*/
			}

			.myOperate .fht-cell {
				/*min-width: 100px;*/
			}

			.selectButton.btn {
				padding: 4px 7px !important;
			}

	</style>

	<div class="page-content">

		<div class="page-bar">
			<ul class="page-breadcrumb">
				<li>
					<i class="fa fa fa-table"></i>
					<a href="@routes.StepMissionController.missionManageBefore()">查找结果</a>
					<i class="fa fa-angle-right"></i>
				</li>
				<li>
					<span >结果详情</span>
				</li>
			</ul>
		</div>

		<div class="row-fluid">
			<div class="row">
				<div class="col-md-12 col-sm-12">
					<div class="portlet blue-dark box">
						<div class="portlet-title">
							<div class="caption">
								结果详情
							</div>
						</div>

						<div class="portlet-body">

							<form class="form-horizontal" role="form" id="mission">
								<div class="form-body">

									<div class="row">
										<div class="col-md-12">
											<div class="form-group">
												<label class="control-label col-md-2">任务名:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="missionName">  </p>
												</div>
												<label class="control-label col-md-2">查询样品:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="sampleId">  </p>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-md-12">
											<div class="form-group">
												<label class="control-label col-md-2">试剂盒:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="kitName">  </p>
												</div>
												<label class="control-label col-md-2">步数:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="stepNum">  </p>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-md-12">
											<div class="form-group">
												<label class="control-label col-md-2">板号:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="containerName">  </p>
												</div>
												<label class="control-label col-md-2">结果数量:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="resultNum">  </p>
												</div>
											</div>
										</div>
									</div>

									<div class="row">
										<div class="col-md-12">
											<div class="form-group">
												<label class="control-label col-md-2">开始日期:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="startTime">  </p>
												</div>
												<label class="control-label col-md-2">结束日期:</label>
												<div class="col-md-4">
													<p class="form-control-static" id="endTime">  </p>
												</div>
											</div>
										</div>

									</div>


								</div>
							</form>


							<div id="toolbar" style="margin-bottom: 20px">

								<div class="actions" style="border-radius: 4px">
									<div class="btn-group">
										<a class="btn  btn-primary idsButton" disabled="disabled" href="javascript:;" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
										>
											操作
											<i class="fa fa-angle-down"></i>
										</a>
										<ul class="dropdown-menu pull-right">

											<li>
												<a href="javascript:;" onclick="StepMissionResult.exports">
													<i class="fa fa-download"></i>&nbsp;导出选中数据报告
												</a>
											</li>
											<li class="divider"> </li>

											<li>
												<a href="javascript:;" onclick="StepMissionResult.batchExportDtaShow">
													<i class="fa fa-arrow-circle-right"></i>&nbsp;批量导出DAT文件
												</a>
											</li>

										</ul>
									</div>

									<button type="button" class="btn btn-default btn-xs btn-filter"
									onclick="StepMissionResult.columnsSelectShow">
										<span class="fa fa-th-list"></span> 列筛选
									</button>

									<a class="btn  btn-primary" href="javascript:;"
									data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"
									onclick="StepMissionResult.exportAllDatShow"
									>
										<i class="fa fa-arrow-circle-right"></i> 导出DAT文件
									</a>

								</div>

							</div>

							<div class="table-responsive tableListPanel" >

								<div style="display: none;
									margin-bottom: 10px">筛选条件：<span id="filterCondition">

									<span class="eachFilterCondition" style="display: none">
										<span >Gene ID</span>
										<span style="color: red">LIKE</span>
										AT
										<sup style="" class="mySup" onclick="StepMissionResult.removeCondition">
											<i class="fa fa-times-circle"></i>
										</sup>
									</span>

								</span></div>

								<div style="display: none;
									margin-bottom: 10px">排序条件：
									<span id="sortCondition">

									</span>
								</div>

								<table class="display table table-bordered" id="table" data-pagination="true"
								data-multiple-search="true" >
									<thead>

									</thead>
								</table>

								<div id="allFilterContent">

								</div>

								<div id="myLoading" class="graph_loading" style="width: 1099px;
									display: none;"><span class="icn"></span><br><span class="loadingMessage" style="color: white;
									font-weight: bold">
									正在加载，请稍候</span></div>

							</div>


						</div>
					</div>
				</div>
			</div>

		</div>

		<div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog" style="width: 1200px">
				<div class="modal-content">
					<div class="modal-header bg-primary">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
						<h4 class="modal-title">
							<i class="fa fa-th-list"></i>
							<span id="lblAddTitle" style="font-weight: bold">列筛选</span>
						</h4>
					</div>
					<form class="form-horizontal" id="configForm" action="" data-toggle="validator">
						<div class="modal-body">
							<div class="row-fluid">

								<div class="form-group">
									<label class="control-label col-sm-2">快速选择:</label>
									<div class="col-sm-10" >
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('YARN')">
											YARN试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('SETA')">
											SETA试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('SETB')">
											SETB试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('PowerPlex 21')">
											PowerPlex 21试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('VersaPlex 27PY')">
											VersaPlex 27PY试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('GenoY41')">
											GenoY41试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('华夏白金')">
											华夏白金试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.kitSelect('AB_Y41')">
											AB_Y41试剂盒</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll()">
											全选</button>
										<button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect()">
											反选</button>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">基本信息:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('basicInfo')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('basicInfo')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" style="height: 80px ">
										<div class='checkbox' id='basicInfo'></div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">Autosomal STRs位点:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('autoStr')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('autoStr')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" >
										<div class='checkbox' id='autoStrSite'></div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">Y STRs位点:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('yStr')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('yStr')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" >
										<div class='checkbox' id='yStrSite'></div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">X STRs位点:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('xStr')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('xStr')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" >
										<div class='checkbox' id='xStrSite'></div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">iSNPs位点:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('iSnp')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('iSnp')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" >
										<div class='checkbox' id='iSnpSite'></div>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-sm-2">Y SNPs位点:
										<div style="">
											<button style="margin-right: 5px" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.selectAll('ySnp')">
												全选</button><button style="" class="btn btn-primary selectButton" id="menuBtn" type="button" onclick="StepMissionResult.reverseSelect('ySnp')">
											反选</button>
										</div>
									</label>
									<div class="col-sm-10" >
										<div class='checkbox' id='ySnpSite'></div>
									</div>
								</div>

							</div>
						</div>
						<div class="modal-footer bg-info">
							<input type="hidden" id="id" name="id" />
							<button type="button" class="btn blue" onclick="StepMissionResult.execColumnsSelect">
								确定</button>
							<button type="button" class="btn green" data-dismiss="modal">
								取消</button>
						</div>
					</form>
				</div>
			</div>
		</div>

		<div id="locusModal" class="modal fade myModal">
			<div class="modal-dialog" style="width: 800px">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
									&times;</button>
						<h4 class="modal-title">
							<span id="number" class="locus"></span>(<span id="number" class="id"></span>)</h4>
					</div>
					<div class="modal-body">

						<div class="table-responsive" id="tableContent">
							<table class="display table table-bordered detailTable" id="detailTable"

							>
								<thead>
								</thead>
							</table>

						</div>
						<hr>
						<div align="center">
							<div id="strDetailChart" style=""></div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
					</div>
				</div>
			</div>
		</div>

		<div id="snpModal" class="modal fade myModal">
			<div class="modal-dialog" style="width: 600px">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" data-dismiss="modal" aria-hidden="true" class="close">
									&times;</button>
						<h4 class="modal-title">
							<span id="number" class="locus"></span>(<span id="number" class="id"></span>)</h4>
					</div>
					<div class="modal-body">

						<div class="table-responsive" id="tableContent">
							<table class="display table table-bordered detailTable" id="detailTable"
							style="word-break: break-all;
								table-layout: fixed"

							>
								<thead>
								</thead>
							</table>

						</div>
						<hr>
						<div align="center">
							<div id="detailChart" style=""></div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" data-dismiss="modal" class="btn btn-default ">关闭</button>
					</div>
				</div>
			</div>
		</div>

		@user.exportDatModal()
		@user.exportAllDatModal()

	</div>

	<script>

			var missionId = "@missionId"

			$(function () {
				StepMissionResult.init

			})

	</script>


}